<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <div class="table-operator">
      <!-- 搜索板块 -->
      <a-row class="row-item-search">
        <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
          <a-form-item label="姓名/手机号">
            <a-input v-decorator="['search']" placeholder="请输入表单所填姓名/手机号"/>
          </a-form-item>
<!--          <a-form-item label="表单类型">-->
<!--            <a-select v-decorator="['form_type', { initialValue: 0 }]">-->
<!--              <a-select-option :value="0">全部</a-select-option>-->
<!--              <a-select-option v-for="(item, index) in formTypeList" :key="index" :value="item.value">{{-->
<!--                  item.name-->
<!--                }}-->
<!--              </a-select-option>-->
<!--            </a-select>-->
<!--          </a-form-item>-->
<!--          <a-form-item label="预约类型">-->
<!--            <a-select v-decorator="['appointment_type', { initialValue: 0 }]">-->
<!--              <a-select-option :value="0">全部</a-select-option>-->
<!--              <a-select-option v-for="(item, index) in appointmentTypeList" :key="index" :value="item.value">{{-->
<!--                  item.name-->
<!--                }}-->
<!--              </a-select-option>-->
<!--            </a-select>-->
<!--          </a-form-item>-->
<!--          <a-form-item label="表单状态">-->
<!--            <a-select v-decorator="['status', { initialValue: 0 }]">-->
<!--              <a-select-option :value="0">全部</a-select-option>-->
<!--              <a-select-option v-for="(item, index) in FormStatusList" :key="index" :value="item.value">{{-->
<!--                  item.name-->
<!--                }}-->
<!--              </a-select-option>-->
<!--            </a-select>-->
<!--          </a-form-item>-->
<!--          <a-form-item label="诉求时间">-->
<!--            <a-range-picker format="YYYY-MM-DD" v-decorator="['betweenTime']"/>-->
<!--          </a-form-item>-->
          <a-form-item class="search-btn">
            <a-button type="primary" icon="search" html-type="submit" style="margin-right: 10px">搜索</a-button>
            <a-button v-action:export type="primary" icon="download" :loading="isExporting" @click="handleExport"
            >导出
            </a-button
            >
          </a-form-item>
        </a-form>
      </a-row>
      <!-- 操作板块 -->
      <!--      <div class="row-item-tab clearfix">-->
      <!--        <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button>-->
      <!--      </div>-->
    </div>
    <s-table
      ref="table"
      rowKey="appointment_id"
      :loading="isLoading"
      :columns="columns"
      :data="loadData"
      :pageSize="15"
    >
      <!-- 表单类型 -->
      <!--      <span slot="form_type" slot-scope="text">-->
      <!--        {{ getFormType(text) }}-->
      <!--      </span>-->
      <!--      &lt;!&ndash; 预约类型 &ndash;&gt;-->
      <!--      <span slot="appointment_type" slot-scope="text">-->
      <!--        {{ getAppointmentType(text) }}-->
      <!--      </span>-->
      <!--      &lt;!&ndash; 预约时间 &ndash;&gt;-->
      <!--      <span slot="time" slot-scope="text">-->
      <!--        {{ text.slice(0, 16) }}-->
      <!--      </span>-->
      <!-- 状态 -->
      <span slot="status" slot-scope="text, item">
        <a-tag :color="getFormStatusColor(text, item)" @click="switchStatus(item)">{{
            getFormStatus(text, item)
          }}</a-tag>
      </span>
      <!-- 操作项 -->
      <span slot="action" slot-scope="text, item">
        <a v-action:edit style="margin-right: 8px" @click="handleEdit(item)" v-if="item.status != 30">编辑</a>
        <a v-action:edit style="margin-right: 8px" @click="handleDetail(item)" >详情</a>
        <!--        <a v-action:delete @click="handleDelete(item)">删除</a>-->
      </span>
    </s-table>
    <AddForm ref="AddForm" :categoryList="categoryList" @handleSubmit="handleRefresh"/>
    <EditForm ref="EditForm" :categoryList="categoryList" @handleSubmit="handleRefresh"/>
    <Detail ref="Detail" @handleSubmit="handleRefresh"/>

  </a-card>
</template>

<script>
import moment from 'moment'
import * as Api from '@/api/appointment/index'
import AppointmentTypeEnum from '@/common/enum/appointment/AppointmentType'
import FormTypeEnum from '@/common/enum/appointment/FormType'
import FormStatusEnum from '@/common/enum/appointment/FormStatus'
import {ContentHeader, STable} from '@/components'
import EditForm from './modules/EditForm'
import AddForm from './modules/AddForm'
import Detail from './modules/Detail'


// 表格表头
const columns = [
  {
    title: 'ID',
    dataIndex: 'appointment_id',
  },
  {
    title: '诉求类型',
    dataIndex: 'type',
    scopedSlots: {customRender: 'type'},
    align: 'center',
  },
  {
    title: '详细项目',
    dataIndex: 'project',
    scopedSlots: {customRender: 'project'},
    align: 'center',
  },
  {
    title: '诉求时间',
    dataIndex: 'create_time',
    scopedSlots: {customRender: 'create_time'},
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: {customRender: 'status'},
    align: 'center',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    scopedSlots: {customRender: 'name'},
    align: 'center',
  },
  {
    title: '手机号码',
    dataIndex: 'phone',
    scopedSlots: {customRender: 'phone'},
    align: 'center',
  },
  {
    title: '地址',
    dataIndex: 'address',
    align: 'center',
  },

  {
    title: '操作',
    dataIndex: 'action',
    width: '180px',
    scopedSlots: {customRender: 'action'},
    align: 'center',
  },
]

export default {
  name: 'Index',
  components: {
    ContentHeader,
    STable,
    AddForm,
    EditForm,
    Detail
  },
  data() {
    return {
      expand: false,
      // 当前表单元素
      searchForm: this.$form.createForm(this),
      // 分类列表
      categoryList: [],
      // 查询参数
      queryParam: {},
      // 正在加载
      isLoading: false,
      // 正在导出
      isExporting: false,
      // 表头
      columns,
      // 加载数据方法 必须为 Promise 对象
      loadData: (param) => {
        return Api.list({...param, ...this.queryParam}).then((response) => {
          return response.data.list
        })
      },
    }
  },
  computed: {
    formTypeList() {
      return FormTypeEnum.getData()
    },

    appointmentTypeList() {
      return AppointmentTypeEnum.getData()
    },

    // 获取表单状态列表
    FormStatusList() {
      return FormStatusEnum.getData()
    },
  },
  methods: {
    /**
     * 删除记录
     */
    handleDelete(item) {
      const app = this
      const modal = this.$confirm({
        title: '您确定要删除该记录吗?',
        content: '删除后不可恢复',
        onOk() {
          return Api.deleted({appointmentId: item.appointment_id})
            .then((result) => {
              app.$message.success(result.message, 1.5)
              app.handleRefresh()
            })
            .finally((result) => {
              modal.destroy()
            })
        },
      })
    },

    /**
     * 新增记录
     */
    handleAdd() {
      this.$refs.AddForm.add()
    },

    /**
     * 编辑记录
     */
    handleEdit(item) {
      this.$refs.EditForm.edit(item.appointment_id)
    },

    handleDetail(item) {
      this.$refs.Detail.show(item)
    },

    // 确认搜索
    handleSearch(e) {
      e.preventDefault()
      this.searchForm.validateFields((error, values) => {
        if (!error) {
          this.queryParam = {...this.queryParam, ...values}
          this.handleRefresh(true)
        }
      })
    },

    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(bool)
    },

    /**
     * 获取预约类型
     */
    getAppointmentType(value) {
      return AppointmentTypeEnum.getNameByValue(value)
    },

    /**
     * 获取表单类型
     */
    getFormType(value) {
      return FormTypeEnum.getNameByValue(value)
    },

    /**
     * 获取表单状态
     */
    getFormStatus(value, item) {
      // 如果表单状态是预约中的，判断是否已过时
      if (value === FormStatusEnum.IN_PROGRESS.value && moment().isAfter(item.time)) {
        return '已过时'
      }

      return FormStatusEnum.getNameByValue(value)
    },

    /**
     * 获取表单状态颜色
     */
    getFormStatusColor(value, item) {
      // 如果表单状态是预约中的，判断是否已过时
      if (value === FormStatusEnum.IN_PROGRESS.value && moment().isAfter(item.time)) {
        return ''
      }

      if (value === FormStatusEnum.IN_PROGRESS.value) {
        return 'blue'
      }

      if (value === FormStatusEnum.ARRIVAL.value) {
        return 'green'
      }

      if (value === FormStatusEnum.CANCELLED.value) {
        return 'red'
      }

      if (value === FormStatusEnum.PROCESSED.value) {
        return 'orange'
      }

      return ''
    },

    /**
     * 导出数据
     */
    handleExport() {
      this.searchForm.validateFields((error, values) => {
        if (!error) {
          Api.exportData({
            columns: [
              'appointment_id',
              'secrecy',
              'name',
              'phone',
              'address',
              'detail_address',
              'type',
              'status',
              'create_time',
              'intro',
              'project',
            ],
            ...values,
          }).then((res) => {
            window.open(res.data.downloadPath)
          })
        }
      })
    },

    // 点击表单状态事件
    switchStatus(item) {
      console.log(item)
      if (item.status != 30) {
        Api.switchStatus({
          appointmentId: item.appointment_id
        }).then(res => {
          this.$message.success(res.message, 1.5)
          this.handleRefresh()
        })
      }

    },
  },
}
</script>
<style lang="less" scoped>
.ant-card-body {
  padding: 22px 29px 25px;
}

// 筛选tab
.tab-list {
  margin-right: 20px;
}

.ant-input-number {
  width: 200px !important;
}
</style>
